<template>
	<view class="feedback-box">
		<LeftBorderTitle title="问题分类" />
		<view class="question-class">
			<text :class="chooseIndex===index?'text active':'text'" v-for="(item,index) in questionClass" :key="index"
				@click="changeChooseIndex(index)">
				{{item}}
			</text>
		</view>

		<LeftBorderTitle title="详细描述">
			<text style="color: #F51F43;margin-left: 8rpx;">*</text>
		</LeftBorderTitle>
		<view class="detail-describe-box public345">
			<textarea class="detail-describe" cols="30" rows="10" maxlength="200"
				placeholder="有什么想说的，尽管给我留言吧(10~200字以内)" placeholder-style="color:#D0D0D0"
				v-model="textAreaValue"></textarea>
			<text class="detail-describe-tip">
				{{textAreaValue.length}}/200
			</text>
		</view>

		<LeftBorderTitle title="上传图片">
			<text>（0/3）</text>
		</LeftBorderTitle>
		<view class="up-load-box public345">
			<!-- 上传照片 -->
			<view class="up-load">
				<uni-icons type="camera" size="64rpx" color="#B0B0B0"></uni-icons>
				<view class="text">上传照片</view>
			</view>
		</view>

		<LeftBorderTitle title="联系方式" />
		<u--input maxlength="11" placeholder="请输入手机号" placeholder-style="color:#D0D0D0" border="none"
			:customStyle="customStyles" v-model="phone"></u--input>

		<!-- 立即提交 -->
		<view class="now-submit" @click="nowSubmit">
			<text class="text">立即提交</text>
		</view>
	</view>
</template>

<script>
	import LeftBorderTitle from '../../components/common/LeftBorderTitle.vue'
	export default {
		data() {
			return {
				// 问题分类数据
				questionClass: ['商品相关', '功能异常', '优化建议', '软件相关', '其他'],
				chooseIndex: -1,
				// 文本框的内容
				textAreaValue: '',
				// 输入框的样式
				customStyles: {
					width: '630rpx',
					margin: '0 auto',
					padding: '20rpx 30rpx',
					borderRadius: '16rpx',
					background: '#f8f8f8',
					fontSize: '28rpx'
				},
				// 手机号
				phone: ''
			}
		},
		methods: {
			changeChooseIndex(index) {
				this.chooseIndex = index
			},
			nowSubmit() {
				if (!(/^1[34578]\d{9}$/.test(this.phone))) {
					// 调用消息提示
					uni.showToast({
						title: this.phone === '' ? '请输入手机号码' : '手机号码格式错误',
						icon: 'none'
					})
					// 清空手机号
					this.phone = ''
				} else {
					console.log('问题分类', this.questionClass[this.chooseIndex])
					console.log('详细描述', this.textAreaValue)
					console.log('联系方式', this.phone)
				}
			}
		},
		components: {
			LeftBorderTitle
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	// 意见反馈
	.feedback-box {
		background: #fff;

		// 问题分类
		.question-class {

			.text {
				display: inline-block;
				width: 160rpx;
				border-radius: 8rpx;
				margin: 0 16rpx 16rpx 0;
				border: 1px solid rgba(0, 0, 0, 0.1);
				font-size: 24rpx;
				text-align: center;
				line-height: 64rpx;
				color: #666;

				&.active {
					border: 1px solid #FF7803;
					background: rgba(246, 112, 77, 0.1);
					color: #FF7803;
				}
			}

			.text:nth-child(4n+1) {
				margin: 0 16rpx 16rpx 30rpx;
			}

			// 最后一项 去除外边距
			.text:last-child {
				margin: 0 0 0 30rpx;
			}
		}

		.detail-describe-box {
			position: relative;

			// 详细描述
			.detail-describe {
				width: 100%;
				padding: 24rpx;
				background-color: #f8f8f8;
				border-radius: 16rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				box-sizing: border-box;
			}

			.detail-describe-tip {
				position: absolute;
				bottom: 16rpx;
				right: 42rpx;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 24rpx;
				color: rgba(0, 0, 0, 0.25);
			}
		}

		// 上传图片
		.up-load-box {

			.up-load {
				width: 200rpx;
				height: 200rpx;
				padding-top: 40rpx;
				border-radius: 16rpx;
				background-color: #F8F8F8;
				text-align: center;
				box-sizing: border-box;

				.text {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.25);
					line-height: 88rpx;
				}
			}
		}

		// 立即提交
		.now-submit {
			padding: 60rpx 30rpx 30rpx;

			.text {
				display: inline-block;
				width: 690rpx;
				border-radius: 44rpx;
				background-color: #FF7803;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
</style>
